<template>
    <div>
        <div class="drop" @click.stop="">
            <div class="item-title">{{data && data.name.replace('.' + data.suffix, '')}}</div>
            <ul class="item-list">
                <li class="option" @click.stop="onEdit"><img src="../../../assets/image/rename.png" alt=""><span>重命名</span></li>
                <li class="option" v-if="data && data.suffix" @click.stop="onShareFile"><img src="../../../assets/image/share-icon.png" alt=""><span>分享</span></li>
                <li class="option" v-if="data && data.suffix && isEdit === 1" @click="cancleDdit">
                    <img src="../../../assets/image/open-edit.png" alt="">
                    <span>释放编辑</span>
                </li>
                <li class="option" v-if="data && data.suffix && isEdit === 2" @click="applyDdit">
                    <img src="../../../assets/image/edit.png" alt="">
                    <span>申请编辑</span>
                </li>
                <li class="option"><img src="../../../assets/image/del.png" alt="" @click.stop="onDelete"><span>删除</span></li>
            </ul>
        </div>

    </div>

</template>

<script>


    export default {
        name: 'DialogShowMore',
        props: {
            data: Object,
        },
        computed: {
            isEdit() {
                const realname = JSON.parse(localStorage.getItem('userInfo')).realName
                return this.data !== null
                    ? this.data.suffix && this.data.suffix.includes('html')
                        ? this.data.editor === realname
                            ? 1
                            : 2
                        : 3
                    : ''
            },
        },

        methods: {
            onEdit() {
                // this.$emit('onEdit')
                this.$parent.onEdit();
            },
            onShareFile() {
                // this.$emit('onShareFile')
                this.$parent.onShareFile();
            },
            onDelete() {
                this.$parent.onDelete();
            },
            cancleDdit() {
                this.$parent.cancleDdit();
            },
            applyDdit() {
                this.$parent.applyDdit()
            }
        }
    }
</script>

<style scoped>
    .drop {
        width: 650px;
        height: 360px;
        background: #FFFFFF;
        border-radius: 40px 40px 0 0;
        position: absolute;
        bottom: 0;
        right: 0;
        text-align: center;
        padding: 30px 50px 0;
    }
    .drop .item-title {
        font-size: 28px;
        font-weight: normal;
        color: #181818;
        opacity: 0.7;
        margin-bottom: 53px;
    }
    .drop .item-list {
        display: flex;
        justify-content: space-around;
    }
    .option {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .option img {
        width: 120px;
        height: 120px;
    }
    .option span {
        font-size: 18px;
        font-weight: normal;
        color: #000000;
        opacity: 0.7;
    }

</style>